<template>
  <el-header>
    <PageHeader :router_list="router_list" :show-logo="false"/>
  </el-header>
  <el-main>
    <header class="head">
      <div class="head-layout">
        <img :src='image.class_background' alt="" style="width: 100%">
        <div class="head-top">
          <div class="left">
            <h1>{{ classDetailInfo.name }}</h1>
            <h2>{{ classDetailInfo.classInfo }}</h2>
            <div class="code flex-align">
              <img :src='image.add_course' alt="">
              <span class="code-but">
                <i>加课码</i>
                <span>{{ classDetailInfo.addCourseCode }}</span>
              </span>
              <span class="member"
                    @click="router.push({path: '/main/member', query: {id: classDetailInfo.id}})">已有{{ classDetailInfo.totalNumber }}人加入</span>
            </div>
          </div>
          <div class="right">
            <el-button v-if="true">
              <img :src="image.open_up" alt="" style="margin-right: 8px; width: 16px; height: 16px">
              <span style="color: #c0c4cc">暂无课堂</span>
            </el-button>
          </div>
        </div>
      </div>
      <div class="head-bottom flex-align">
        <el-tabs v-model="mainContentName" class="demo-tabs" @tab-click="handleHeaderClick">
          <el-tab-pane class="bar-item" label="课程学习" name="study"></el-tab-pane>
          <el-tab-pane class="bar-item" label="学情分析" name="analyse"></el-tab-pane>
          <el-tab-pane class="bar-item" label="成绩管理" name="manage"></el-tab-pane>
          <el-tab-pane class="bar-item" label="课程信息" name="info"></el-tab-pane>
        </el-tabs>
      </div>
    </header>
    <main>
      <div>
        <el-tabs v-model="activeItemName" class="demo-tabs">
          <el-tab-pane label="目录" name="catalog">
            <div class="contents">
              <div class="info">
                <span>共0个章节</span>
                <span style="margin-left: 8px">0个活动</span>
              </div>
              <div class="main-contents">
              </div>
            </div>

            <list_empty></list_empty>
          </el-tab-pane>
          <el-tab-pane label="互动课件" name="courseware">课件内容</el-tab-pane>
          <el-tab-pane label="作业" name="work">
            <div class="contents">
              <div class="info">
                <div>
                  <span style="margin-left: 8px">共{{ workList.length }}个活动</span>
                </div>

                <div>
                  <el-button v-if="userInfo.type === 1">
                    <img :src="image.add" alt="">
                    <span @click.stop="addWorkVisible = true">添加作业</span>
                  </el-button>
                </div>
              </div>
              <div class="main-contents" v-if="workList.length !== 0">
                <ul>
                  <li class="flex-between" v-for="work in workList">
                    <TeacherCard v-if="userInfo.type === 1" :work="work" @init-data="initData"/>
                    <StudentCard v-if="userInfo.type === 0" :work="work" @init-data="initData"/>
                  </li>
                </ul>
              </div>
            </div>
            <list_empty v-if="workList.length === 0"></list_empty>
          </el-tab-pane>
          <el-tab-pane label="测试" name="junit">测试</el-tab-pane>
          <el-tab-pane label="资料" name="data">资料</el-tab-pane>
          <el-tab-pane label="腾讯会议" name="meeting">腾讯会议</el-tab-pane>
          <el-tab-pane label="公告" name="announcement">公告</el-tab-pane>
          <el-tab-pane label="话题" name="topic">话题</el-tab-pane>
          <el-tab-pane label="互动答题" name="question">互动答题</el-tab-pane>
        </el-tabs>
      </div>
    </main>
  </el-main>

  <el-dialog
      v-model="addWorkVisible"
      class="add-work"
      title="Tips"
      width="527"
      draggable
  >
    <template #header>
      <h2>
        <span class="d-name">添加作业</span>
      </h2>
    </template>

    <el-form
        :rules="addWorkRules"
        label-width="auto"
        :model="addWorkForm"
        style="max-width: 600px"
    >
      <el-form-item label="作业类型" prop="type">
        <el-radio-group v-model="addWorkForm.type" class="ml-4" aria-required="true">
          <el-radio value="0" size="large">个人作业</el-radio>
          <el-radio value="1" size="large">小组作业</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="作业标题" prop="courseName">
        <el-input placeholder="作业标题" maxlength="70" show-word-limit v-model="addWorkForm.courseName"></el-input>
      </el-form-item>

<!--      <el-form-item label="作业简介" prop="description">-->
<!--      </el-form-item>-->

      <el-form-item label="时间">
        <el-col :span="11">
          <el-date-picker
              v-model="addWorkForm.startDate"
              type="date"
              placeholder="Pick a date"
              style="width: 100%"
          />
        </el-col>
        <el-col :span="2" class="text-center">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-date-picker
              v-model="addWorkForm.endDate"
              placeholder="Pick a time"
              style="width: 100%"
          />
        </el-col>
      </el-form-item>

<!--      <el-form-item label="附件" prop="annexFile">-->

<!--      </el-form-item>-->

      <el-form-item label="超时状态" prop="isOverTime">
        <el-switch v-model="addWorkForm.isOverTime" />
      </el-form-item>

      <el-form-item label="查重状态" prop="duplicate">
        <el-switch v-model="addWorkForm.description" />
      </el-form-item>

      <el-form-item label="总分" prop="score">
        <el-input-number
            style="width: 100%"
            v-model="addWorkForm.maxScore"
            :min="0"
            :max="100"
            controls-position="right"
            size="large"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addWorkVisible = false">取消</el-button>
        <el-button type="primary" @click="handelAddCourse()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>


<script setup>
import PageHeader from "../../components/PageHeader/index.vue";
import list_empty from "./components/Empty/index.vue"
import {useRoute, useRouter} from "vue-router";
import {image} from "../../assets/index.js";
import {onMounted, ref} from "vue";
import {getCoursesById} from "../../api/course.js";
import userStore from "../../stores/user.js";
import TeacherCard from "./components/Work/Teacher/index.vue"
import StudentCard from "./components/Work/Student/index.vue"
import {getWorks, getWorksOfStudent, insertWork} from "../../api/work.js";
import {ElMessage} from "element-plus";

const router = useRouter()
const router_list = ref([
  {
    name: '课程内容',
    link: '/main/detail'
  }
])

const classDetailInfo = ref({})
const mainContentName = ref('study')
const activeItemName = ref('catalog')

const workList = ref([])
const userInfo = userStore()

const initData = () => {
  workList.value = []
  if (userInfo.type === 1) {
    getWorks({cno: router.currentRoute.value.query.id}).then(res => {
      if (res.code === 200) {
        for (const item of res.data) {
          workList.value.push({
            name: item.courseName,
            endDate: getTime(item.endDate),
            type: item.type,
            published: item.published,
            id: item.id,
            courseId: router.currentRoute.value.query.id
          })
        }
      }
    })
  } else {
    getWorksOfStudent({cno: router.currentRoute.value.query.id, stuId: userInfo.id}).then(res => {
      if (res.code === 200) {
        for (const item of res.data) {
          workList.value.push({
            ...item,
            courseId: router.currentRoute.value.query.id
          })
        }
      }
    })
  }

  getCoursesById({id: router.currentRoute.value.query.id}).then(res => {
    if (res.code === 200) {
      classDetailInfo.value = res.data
    }
  })
}

const getTime = (Timestamp) => {
  let date1 = new Date(Timestamp);
  return date1.toLocaleDateString().replace(/\//g, "-")
}


const addWorkVisible = ref(false)
const addWorkRules = ref({
  courseName: [{required: true, message: '请输入名称', trigger: 'blur'}],
  description: [],
  startDate: [{required: true, message: '请输入开始时间', trigger: 'blur'}],
  endDate: [{required: true, message: '请输入结束时间', trigger: 'blur'}],
  annexFile: [],
  isOverTime: [{required: true, message: '请输入超时状态', trigger: 'blur'}],
  maxScore: [{required: true, message: '请输入分数', trigger: 'blur'}],
  duplicate: [{required: true, message: '请输入查重状态', trigger: 'blur'}],
  type: [{required: true, message: '请输入作业类型', trigger: 'blur'}]
})

const addWorkForm = ref({
  courseName: '',
  description: '',
  startDate: '',
  endDate: '',
  annexFile: '',
  isOverTime: false,
  maxScore: 0,
  duplicate: false,
  type: '0'
})

const handleHeaderClick = () => {

}

const dialogVisible = ref(false)

const handelAddCourse = () => {
  addWorkForm.value.duplicate = addWorkForm.value.duplicate === false ? 0 : 1
  addWorkForm.value.isOverTime = addWorkForm.value.isOverTime === false ? 0 : 1
  addWorkForm.value.type = addWorkForm.value.type === '0' ? 0 : 1

  insertWork(
      {...addWorkForm.value,
        principalId: classDetailInfo.value.principalId,
        courseId: classDetailInfo.value.id
      }
  ).then(res => {
    if (res.code === 200) {
      message('success', '创建成功')
      initData()
      addWorkVisible.value = false
    }
  })
}

onMounted(() => {
  initData()
})

const message = (type, text) => {
  ElMessage({
    message: text,
    type: type,
    plain: true,
  })
}

</script>

<style scoped>
.el-header {
  margin-bottom: 12px;
}

.el-main {
  width: 1224px;
  padding: 0;
  margin: auto;

  :deep(.el-tabs__header) {
    margin: 0;
  }

  header {
    background-color: #e8f0ff;

    .head-layout {
      position: relative;
      background: #e8f0ff;
      border-radius: 8px 8px 0 0;
      height: 200px;

      .head-top {
        position: absolute;
        width: 1224px;
        height: 200px;
        left: 0;
        top: 0;
        padding: 24px;
        color: #fff;
        display: flex;

        .left {
          flex: 1;
        }

        .right {
          display: flex;
          flex-direction: column;
          font-size: 14px;
          justify-content: end;

          .el-button {
            background-color: white;
            cursor: not-allowed;
            padding: 10px 20px;
            margin-left: 24px;
            min-width: 120px;
            border-radius: 20px;
            height: fit-content;
          }
        }

        h1 {
          font-weight: 400;
          font-size: 36px;
        }

        h2 {
          font-size: 20px;
          line-height: 32px;
          font-weight: 400;
        }

        .code {
          margin-top: 55px;
          font-size: 14px;
          font-weight: 400;

          .code-but {
            cursor: pointer;
            margin-right: 16px;
          }

          i {
            font-family: font_family, sans-serif !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            margin-right: 4px;
          }

          img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }

          span {
            cursor: pointer;
          }
        }
      }
    }

    .head-bottom {
      width: 1224px;
      height: 64px;
      color: #3c4043;
      font-size: 14px;
      font-weight: 400;
      justify-content: center;
      background: #fff;
      border-radius: 0 0 8px 8px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);

      .el-tabs {
        height: 100%;
      }

      :deep(.el-tabs__active-bar) {
        height: 0;
      }

      :deep(.el-tabs__header) {
        margin: 0;
        height: 100%;
      }

      :deep(.el-tabs__nav-wrap) {
        height: 100%;
      }

      :deep(.el-tabs__nav-scroll) {
        height: 100%;
      }

      :deep(.el-tabs__nav) {
        height: 100%;
      }

      :deep(.el-tabs__item) {
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        margin: auto 24px;
        text-align: center;
        font-size: 20px;
        padding-left: 5px;
        padding-right: 5px;
      }

      :deep(.is-active) {
        background: #e8f0ff;
        color: #4285f4;
        border-radius: 10px;
      }

      :deep(.el-tabs__nav-wrap:after) {
        content: '';
        height: 0;
      }
    }
  }

  main {
    margin: 10px 0 0 0;

    :deep(.el-tabs__nav-wrap:after) {
      height: 0;
    }

    :deep(.el-tabs__content) {
      font-size: 14px;
    }

    .contents {
      .info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;

        .el-button {
          padding: 10px 20px;
          background: #33d5a6;
          border-radius: 20px;
          border-color: #33d5a6;
          color: #fff;

          img {
            width: 14px;
            height: 14px;
            margin-right: 5px;
          }
        }
      }

      .main-contents {
        ul {
          padding-top: 16px;
          border: 1px solid #e7ebf0;
          border-radius: 8px;
          margin-top: 8px;
          margin-bottom: 10px;

          li {
            padding: 10px 16px 0 16px;
            background: #fff;
            overflow: hidden;

            .card-layout-box {
              width: 100%;
              background: #fff;
              display: flex;
              position: relative;

              .layout-left {
                display: flex;
                flex-direction: column;
                min-width: 85px;
                margin-right: 16px;
                font-size: 12px;

                img {
                  height: 40px;
                  max-width: 40px;
                  margin-bottom: 10px;
                }

                .another-name {
                  position: relative;
                  margin-top: 5px;
                  line-height: 13px;
                  display: inline-block;
                  width: 85px;
                  text-align: center;
                  max-height: 31px;
                  margin-bottom: 2px;
                }

                .lable-type {
                  color: #3c4043;
                  font-size: 13px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  max-width: 65px;
                  max-height: 30px;
                  line-height: 15px;
                  word-break: break-all;
                  display: inline-block;
                  text-align: center;
                }
              }

              .layout-right {
                width: 100%;
                border-bottom: 1px solid #eee;
                padding: 0 0 4px;
                font-size: 14px;

                .layout-right-info {
                  .info-title {
                    font-size: 16px;
                    margin-bottom: 12px;
                    max-width: 500px;
                    cursor: pointer;
                    color: #212121;
                    display: -webkit-box;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                    white-space: normal;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                  }

                  .statue-bar {
                    color: #5f6368;
                    font-size: 12px;
                    font-style: normal;

                    .el-divider .el-divider--vertical {
                      font-style: normal;
                      display: inline-block;
                      width: 1px;
                      height: 1em;
                      margin: 0 8px;
                      vertical-align: middle;
                      position: relative;
                    }
                  }

                  .learning-state {
                    font-size: 12px;
                    padding-top: 8px;
                  }

                  .font-color--warning {
                    color: #ff941f;
                  }
                }

                .layout-right-functional {
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  flex: 1;
                  font-size: 12px;
                }
              }
            }
          }

          .flex-between {
            padding: 10px 16px 0 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
        }
      }
    }
  }
}

.flex-align {
  display: flex;
  align-items: center;
}

</style>

<style>
.el-tabs__item {
  font-size: 16px !important;
}
</style>
